<template>
    <div class="flex_col m5 p10 card">
        <label class="flex_center_self">取货控制</label>
        <div class="flex_row_center mt5">
            <label>行:</label>
            <el-select v-model="ctx.row" style="width: 100px;">
                <el-option
                    v-for="(item, index) in ROWS"
                    :key="index"
                    :label = "item"
                    :value = "item"
                />
            </el-select>
            <label class="ml5">列:</label>
            <el-select v-model="ctx.col" style="width: 100px;">
                <el-option
                    v-for="(item, index) in COLS"
                    :key="index"
                    :label="item"
                    :value="item"
                    />
            </el-select>
        </div>
        <div class="flex_row_center mt5">
            <el-button @click="onClickPick" type="primary">取货</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { comprCtrl, pickCtrl, rowColCtrl } from '@/service/devices/cargo';
import { cargo_pick_position_with_row, cargo_position_with_col, COLS, ROWS } from '@/utils/config';
import { delay, runAction } from '@/utils/ui';
import { reactive } from 'vue';


interface Props {
    index: number,
}

const props = defineProps<Props>();

interface Ctx {
    row: number,
    col: number,
}

const ctx = reactive<Ctx>({
    row: 1,
    col: 1
});

async function onClickPick() {
    await runAction('取货', `取货:${ctx.row}-${ctx.col}`, async () => {
        await rowColCtrl({
            index: props.index,
            row: cargo_pick_position_with_row(ctx.row),
            col: cargo_position_with_col(ctx.col),
        });
        await comprCtrl({
            index: props.index,
            position: 8
        });
        await pickCtrl({
            index: props.index,
            position: 0
        });
        await comprCtrl({
            index: props.index,
            position: 3
        });
        await delay(800);
        await comprCtrl({
            index: props.index,
            position: 6
        });
        await delay(500);
        await comprCtrl({
            index: props.index,
            position: 4,
        });
        await comprCtrl({
            index: props.index,
            position: 0
        });
        await comprCtrl({
            index: props.index,
            position: 7
        });
    });
}

</script>
